<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增工时')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style>
        .day {
            color: #000000;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-cost-add">
        <h4 class="form-header h4">基本信息</h4>
        <div class="form-group">
            <div class="col-md-4">
                <label class="col-sm-3 control-label is-required">成员：</label>
                <div class="col-sm-6">
                    <select id="userSelect" name="user" class="form-control m-b" onchange="getProjectList(this);"
                            required>
                        <option th:each="user : ${users}" th:text="${user.userName}" th:value="${user.userId}"></option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <button type="button" class="btn btn-sm btn-success refresh" onclick="changeHandler()"><i
                            class="fa fa-refresh"></i> 换一人
                    </button>
                </div>
            </div>
            <div class="col-md-8">
                <label class="col-sm-2 control-label is-required">起止日期：</label>
                <button type="button" class="btn btn-sm btn-warning" onclick="changeweek(-1)"><i
                        class="fa fa-backward"></i> 上一周
                </button>
                <button type="button" class="btn btn-sm btn-danger" onclick="changeweek(0)"><i class="fa fa-eject"></i>
                    本周
                </button>
                <button type="button" class="btn btn-sm btn-warning" onclick="changeweek(1)"><i
                        class="fa fa-forward"></i> 下一周
                </button>
                <div class="col-sm-6">
                    <div class="input-daterange input-group">

                        <input type="text" name="startDate" class="input-sm form-control" id="datetimepicker-startTime"
                               placeholder="yyyy-MM-dd" th:value="${beginDate}" autocomplete="off" required>
                        <span class="input-group-addon">到</span>
                        <input type="text" name="endDate" class="input-sm form-control" id="datetimepicker-endTime"
                               placeholder="yyyy-MM-dd" th:value="${endDate}" autocomplete="off" required>

                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">项目信息</h4>
        <div class="form-group project-line" th:each="op : ${projectList}">
            <div class="col-md-3">
                <label class="col-sm-4 control-label is-required">项目：</label>
                <div class="col-sm-8">
                    <select name="projectId" class="form-control m-b projectSelector" required>
                        <!--                        <option th:each="project : ${projects}" th:text="${project.name}" th:value="${project.id}"-->
                        <!--                                th:selected="${op == project.id}"></option>-->
                    </select>
                </div>
            </div>
            <div class="col-md-9">
                <label class="col-sm-1 control-label is-required">人时：</label>
                <div class="col-sm-2">
                    <input name="costDay" class="form-control" type="text" required>
                </div>
                <label class="col-sm-1 control-label is-required">内容：</label>
                <div class="col-sm-7">
                    <textarea type="text" name="remark" class="form-control" placeholder="请输入工作内容" required></textarea>
                </div>
                <button type="button" class="btn btn-sm btn-danger" onclick="removeProject(this)"><i
                        class="fa fa-remove"></i> 删除
                </button>
            </div>
        </div>
    </form>
</div>
<div class="col-sm-12">
    <div class="pull-left">
        <button type="button" class="btn btn-sm btn-success" onclick="addHandler()"><i class="fa fa-plus"></i> 增加项目
        </button>
    </div>
    <div class="pull-right">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i> 保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i> 关 闭
        </button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/cost";
    var loginUserId = [[${loginUser.userId}]];
    $("#form-cost-add").validate({
        focusCleanup: true,
        rules: {
            costDay: {
                required: true,
                number: true
            }
        }
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.saveTab(prefix + "/add", $('#form-cost-add').serialize(), changeSuccussHandler);
        }
    }

    function addHandler() {
        $(".project-line:last").after($(".project-line:last").prop("outerHTML"));
        $("#form-cost-add").validate({
            focusCleanup: true,
            rules: {
                costDay: {
                    required: true,
                    number: true
                }
            }
        });
    }

    function changeweek(week) {
        $.ajax({
            url: prefix + "/changeweek?week=" + week + "&date=" + $("#datetimepicker-endTime").val(),
            type: "POST",
            success: function (result) {
                $("#datetimepicker-endTime").val(result[1]);
                $("#datetimepicker-startTime").val(result[0]);
            }
        });
    }

    function changeHandler() {
        var nextUser = $("#userSelect").find("option:selected").next();
        var value = nextUser.val();
        if (value == undefined || value == null || value == "") {
            value = $("#userSelect").find("option").first().val();
        }
        $("#userSelect").val(value);
        $("#userSelect").change();
    }

    function changeSuccussHandler(result) {
        if (result.code == web_status.SUCCESS) {
            var topWindow = $(window.parent.document);
            var currentId = $('.page-tabs-content', topWindow).find('.active').attr('data-panel');
            var $contentWindow = $('.RuoYi_iframe[data-id="' + currentId + '"]', topWindow)[0].contentWindow;
            $contentWindow.$.table.refresh();
            $.modal.closeTab();
            $contentWindow.$.operate.addTab();
        }
    }

    function removeProject(o) {
        if ($(".project-line").length < 2) {
            alert("至少有一个项目");
            return;
        }
        $(o).parent().parent().remove();
    }

    $("#datetimepicker-startTime").datetimepicker({
        format: 'yyyy-mm-dd',
        minView: "month",
        todayBtn: true,
        autoclose: true,
        weekStart: 1,
        endDate: new Date(),
        daysOfWeekDisabled: [0, 1, 2, 3, 4, 5]
    }).on('changeDate', function (event) {
        event.preventDefault();
        event.stopPropagation();
        var startTime = event.date;
        $('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
    });

    $("#datetimepicker-endTime").datetimepicker({
        format: 'yyyy-mm-dd',
        minView: "month",
        todayBtn: true,
        yesterdayBtn: true,
        autoclose: true,
        weekStart: 1,
        startDate: [[${beginDate}]],
        endDate: new Date(),
        daysOfWeekDisabled: [0, 1, 2, 3, 4, 6]
    }).on('changeDate', function (event) {
        event.preventDefault();
        event.stopPropagation();
        var endTime = event.date;
        $("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
    });


    $("button.refresh").hover(function () {
        $("i.fa-refresh").addClass("fa-spin");
    }, function () {
        $("i.fa-refresh").removeClass("fa-spin");
    });

    function getProjectList(e) {
        var sel = $('.projectSelector');
        sel.html("");
        if ($(e).val() == undefined || $(e).val() == null || $(e).val() == "") {
            return;
        }
        $.ajax({
            url: prefix + "/getuserproject",
            type: 'post',
            data: $(e).val(),
            contentType: "application/json;charset=utf-8",
            success: function (res) {
                var data = res.data;
                var len = data.length;
                sel.append("<option value=''>--请选择--</option>");
                for (var i = 0; i < len; i++) {
                    sel.append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
                }
            },
            error: function (res) {
                sel.append("<option value=''>--请选择--</option>");
            }
        })
    }

    $(document).ready(function () {
        $("#userSelect").val(loginUserId);
        $("#userSelect").change();
        $('select').select2('destroy');
        $('#userSelect').select2();
    });

</script>
</body>
</html>